{extend name="public:layout" /}
{block name="title"}seo推荐{/block}
{block name="head"}
<script src="/public/plugins/laypage/laypage.js"></script>
<script src="/public/plugins/template/template.js"></script>
{/block}
{block name="body"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox" style="background: #fff;">
        <input type="hidden" name="day" id="module" value="newlist" />
        <input type="hidden" name="day" id="day" value="1" />
        {include file="cnzz/menu" /}
        <div class="ibox-title">
            <div class="pull-left">
                <a onclick="setValue(this,'module')" data-module="newlist" class="btn btn-info">新出现搜索词 </a>
                <a onclick="setValue(this,'module')" data-module="uplist" class="btn btn-white">上升最快搜索词</a>
            </div>
            <div class="pull-right">
                <a onclick="setValue(this,'day')" data-day="1" class="btn btn-info">昨日</a>
                <a onclick="setValue(this,'day')" data-day="2" class="btn btn-white">前2日</a>
                <a onclick="setValue(this,'day')" data-day="3" class="btn btn-white">前3日</a>
                <a onclick="setValue(this,'day')" data-day="4" class="btn btn-white">前4日</a>
                <a onclick="setValue(this,'day')" data-day="5" class="btn btn-white">前5日</a>
                <a onclick="setValue(this,'day')" data-day="6" class="btn btn-white">前6日</a>
                <a onclick="setValue(this,'day')" data-day="7" class="btn btn-white">前7日</a>
            </div>
        </div>
        <div class="clearfix"></div>
        <div id="listTpl"></div>
    </div>
</div>
{literal}
<script id="ajaxListTpl" type="text/html">
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>关键词</th>
            <th>站内总浏览次数</th>
            <th>搜索次数</th>
            <th>优化推荐度</th>
        </tr>
        </thead>
        <tbody>
        {{ each items as vo i }}
        <tr>
            <td>{{ vo.key }}</td>
            <td>{{ vo.pv }}</td>
            <td>{{ vo.searches }}</td>
            <td class="project-completion">
                <small>优化推荐度：{{ vo.recommend }}%</small>
                <div class="progress progress-mini">
                    <div style="width:{{ vo.recommend }}%;" class="progress-bar"></div>
                </div>
            </td>
        </tr>
        {{ /each }}
        </tbody>
    </table>
    <div id="page"></div>
</script>
{/literal}
{/block}
{block name="script"}
    <script>
        $(function(){
            initPage(1);
        })
        function setValue(obj,id) {
            var value=$(obj).data(id);
            $(obj).addClass('btn-info').siblings().removeClass('btn-info').addClass('btn-white');
            $(obj).removeClass('btn-white');
            $('#'+id).val(value);
            initPage(1);
        }
        function initPage(curr) {
            $.getJSON("{:url('ajaxSeo')}", {
                page: curr || 1,
                day: $('#day').val(),
                module: $('#module').val()
            }, function (res) {
                var html = template('ajaxListTpl', res);
                $('#listTpl').html(html);
                laypage({
                    cont: 'page', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
                    pages: res.page.totalPage, //通过后台拿到的总页数
                    curr: curr || 1, //当前页
                    jump: function (obj, first) { //触发分页后的回调
                        if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                            initPage(obj.curr);
                        }
                    }
                });
            });
        };
    </script>
{/block}